<template>
  <div id="mine">
    <div class="rootMain">
      <!-- <Scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="scroll-box">
      <div :class="['top', $store.state.scrollTop > 0 ?'fixedHeader':'']">-->
      <!--<div class="top_t">
                <span class="topSpan">
                  <img src="@/assets/img/mine/touxiang@2x.png" alt />
                </span>
                <p>
                  GCC余额：
                  <span>
                    <img src="@/assets/img/mine/touxiang@2x.png" alt />
                    <b>0</b>
                  </span>
                </p>
                <div class="topButton">
                  <a href="javascript:;" @click="gomineItem(9)">购买</a>
                  <a href="javascript:;" @click="gomineItem(10)">提币</a>
                </div>
      </div>-->
      <div class="user">
        <div class="userBox">
          <div class="animationbox"></div>
          <div class="animationbox"></div>
          <div class="userImg">
            <!-- <img src="@/assets/img/home/touxiang@2x.png" alt /> -->
            <img src="@/assets/img/fuze/logo.jpg" alt />
          </div>
        </div>
        <div class="loginbox" v-if="!loginToken">
          <span @click="$router.push(`/login`)">{{$t("m.login")}}</span>
          <span @click="$router.push(`/reg`)">{{$t("m.signup")}}</span>
        </div>
        <div class="loginbox" v-else>
          <p>{{userObj.userName}}</p>
        </div>
      </div>
      <div class="mineBottom">
        <div class="mineCell">
          <div class="mineList">
            <div class="mineItem" @click="gomineItem(5)">
              <span>
                <b class="iconfont icon-qiandai"></b>
                {{$t('m.wallet')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(7)">
              <span>
                <b class="iconfont icon-licaitongjibiao"></b>
                {{$t('m.myFinances')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(8)">
              <span>
                <b class="iconfont icon-dingdan"></b>
                {{$t('m.order')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(9)">
              <span>
                <b class="iconfont icon-bangdingyouxiang"></b>
                {{$t('m.bindEmail')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(2)">
              <span>
                <b class="iconfont icon-xiugaimima1"></b>
                {{$t('m.changePwd')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(3)">
              <span>
                <b class="iconfont icon-yaoqing1"></b>
                {{$t('m.myInvitation')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(4)">
              <span>
                <b class="iconfont icon-guanyuwomen1"></b>
                {{$t('m.aboutUs')}}
              </span>
              <label style="color:#ddd;">v.1.0.2</label>
            </div>
            <div class="mineItem" @click="gomineItem(1)">
              <span>
                <b class="iconfont icon-xiazaiapp"></b>
                {{$t('m.download')}}
              </span>
            </div>
            <div class="mineItem" @click="gomineItem(6)">
              <span>
                <b class="iconfont icon-duoyuyan"></b>
                {{$t("m.language")}}
              </span>
            </div>
          </div>
        </div>
        <div class="btn" @click="loginOut" v-if="!!loginToken">{{$t("m.logout")}}</div>
      </div>
      <!-- </div>
        </div>
      </Scroll>-->
    </div>
    <Footer></Footer>
    <van-popup class="langPop" v-model="show">
      <div>
        <p @click="changeLang(0)">中文简体</p>
        <p @click="changeLang(1)">English</p>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import Footer from "@/components/footer";
import Scroll from "@/components/scroll";
import axios from "axios";
import { Dialog, Toast, Popup } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {},
      show: false
    };
  },
  created() {
    this.changeTitle("GCC");
    this.changetabbarIndex(4);
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.userObj = localStorage.getItem("userObj")
      ? JSON.parse(localStorage.getItem("userObj"))
      : "";
  },
  components: {
    Scroll,
    Header,
    Footer
  },
  computed: {
    ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    // 下拉刷新 deling 00
    onRefresh(done) {
      setTimeout(() => {
        done();
        Toast(this.$t("m.refresh"));
      }, 2000);
    },
    onInfinite(done) {
      setTimeout(() => {
        done(0);
      });
    },
    gomineItem(id) {
      if (!this.loginToken) {
        if (id != 4 && id != 6 && id != 1) {
          this.$router.push(`/login`);
          return false;
        }
      }
      if (id == 1) {
        this.$router.push(`/downloadAPP`);
      } else if (id == 2) {
        this.$router.push(`/afterPsw`);
      } else if (id == 3) {
        this.$router.push(`/invite`);
      } else if (id == 4) {
        this.$router.push(`/about`);
        //      Toast("敬请期待");
      } else if (id == 5) {
        // this.$router.push(`/myWallet`);
        this.$router.push(`/assets`);
      } else if (id == 6) {
        this.show = true;
      } else if (id == 7) {
        this.$router.push(`/financialProduct`);
      } else if (id == 8) {
        this.$router.push(`/order`);
      } else if (id == 9) {
        this.$router.push(`/bindEmail`);
      }
    },
    // end
    changeLang(index) {
      if (index == 1) {
        this.$store.state.lang = "en_US";
        this.$i18n.locale = this.$store.state.lang; //关键语句
        localStorage.setItem("language", "en_US");
      } else {
        this.$store.state.lang = "zh_CN";
        this.$i18n.locale = this.$store.state.lang; //关键语句
        localStorage.setItem("language", "zh_CN");
      }
      this.show = false;
      this.$router.go(0);
    },
    //退出登录
    loginOut() {
      Dialog.confirm({
        // title: "温馨提示",
        message: this.$t("m.logoutMsg"),
        confirmButtonText: this.$t("m.confirmButtonText"),
        cancelButtonText: this.$t("m.cancelButtonText")
      })
        .then(() => {
          // on confirm
          var self = this;
          axios({
            method: "get",
            url: Services.apiUrl + "/logout",
            params: {
              token: this.loginToken
            }
          }).then(res => {
            self.loginToken = "";
            self.userObj = {};
            localStorage.removeItem("token");
            localStorage.removeItem("userObj");
            this.$store.state.token = "";
            sessionStorage.clear();
            Toast(this.$t("m.logoutTips"));
          });
        })
        .catch(() => {
          Toast(this.$t("m.logoutTips1"));
          // on cancel
        });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#mine {
  height: 100%;
  color: #40404c;
  background: #f8f8f8;
  .rootMain {
    overflow-y: auto;
  }
  .langPop {
    border-radius: 0.1rem;
    width: 70%;
    > div {
      padding: 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        width: 100%;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        border-bottom: 1px solid #ddd;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  .top_t {
    text-align: center;
    height: 3.65rem;
    background: #fff;
    margin-bottom: 0.2rem;
    box-sizing: border-box;
    border-bottom: 0.02rem solid #ccc;
    padding-top: 0.4rem;
    .topSpan {
      height: 1.35rem;
      width: 100%;
      img {
        width: 1.35rem;
        height: 1.35rem;
      }
    }
    p {
      padding-top: 0.3rem;
      display: flex;
      align-items: center;
      margin-bottom: 0.2rem;
      justify-content: center;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
        font-size: 0.32rem;
        img {
          height: 0.36rem;
          width: 0.36rem;
          position: relative;
          top: -0.03rem;
          margin-right: 0.1rem;
        }
      }
    }
    .topButton {
      display: flex;
      align-items: center;
      justify-content: center;
      a {
        height: 0.6rem;
        width: 1.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.3rem;
        box-sizing: border-box;
        border: 0.02rem solid #666;
      }
      a:first-child {
        background: #1989fa;
        color: #fff;
        margin-right: 0.4rem;
        border-color: #1989fa;
      }
    }
  }
  .user {
    padding: 0.5rem 0.5rem 0;
    height: 3.5rem;
    background-image: url("~@/assets/img/topbg.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    .userBox {
      margin: 0 auto;
      margin-bottom: 0.2rem;
      width: 2rem;
      height: 2rem;
      position: relative;
      .animationbox {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #bebab6;
        opacity: 0.2;
        border-radius: 50%;
        animation: opacity 3s 1s infinite;
        &:nth-of-type(2) {
          animation-delay: 1.5s;
        }
      }
    }
    @keyframes opacity {
      0% {
        opacity: 0.2;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1.5);
      }
    }
    .userImg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      overflow: hidden;
      will-change: transform;
    }
    p.yuer {
      display: flex;
      align-items: center;
      margin-bottom: 0.2rem;
      justify-content: center;
      color: #fff;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f1a335;
        font-size: 0.32rem;
        img {
          height: 0.36rem;
          width: 0.36rem;
          position: relative;
          top: -0.03rem;
          margin-right: 0.1rem;
        }
      }
    }
    .loginbox {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 2rem;
        height: 0.65rem;
        line-height: 0.65rem;
        text-align: center;
        font-size: 0.28rem;
        letter-spacing: 0.05rem;
        border-radius: 0.5rem;
        background: linear-gradient(to right, #ecca96, #d0a060);
        color: #fff;

        // box-shadow: 0 0 0.2rem rgba(68, 30, 230, 0.8);
        &:last-child {
          color: #fff;
          background: linear-gradient(to right, #43434e, #727181);
          margin-left: 0.2rem;
        }
      }
      p {
        font-size: 0.3rem;
        color: #e4b577;
        // position: relative;
        // background-image: -webkit-linear-gradient(
        //   bottom left,
        //   #ecb10df2,
        //   #ff8a06,
        //   #ffc355
        // );
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        // &::after {
        //   content: attr(data-content);
        //   display: block;
        //   position: absolute;
        //   color: yellow;
        //   left: 0;
        //   top: 0;
        //   z-index: 2;
        //   -webkit-mask-image: -webkit-gradient(
        //     linear,
        //     0 0,
        //     0 bottom,
        //     from(yellow),
        //     to(rgba(0, 0, 255, 0))
        //   );
        // }
      }
    }
    .hasLogin {
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.32rem;
        font-weight: bold;
        span {
          color: #fff;
        }
        b {
          margin-right: 0.1rem;
          width: 0.3rem;
          height: 0.3rem;
          background: url("~@/assets/img/common/GCC@2x.png") no-repeat center /
            100% 100%;
        }
        label {
          color: #fff;
        }
      }
    }
  }
  .btn {
    margin: 0.3rem auto;
    width: 4rem;
    height: 0.85rem;
    line-height: 0.85rem;
    font-size: 0.32rem;
    letter-spacing: 0.05rem;
    text-align: center;
    border-radius: 0.1rem;
    color: #fff;
    background: linear-gradient(to right, #43434e, #727181);
  }
  .mineBottom {
    background: #fff;
  }
  .mineCell {
    margin-bottom: 0.8rem;
    .mineList {
      margin-bottom: 0.3rem;
      // background: #fff;
      // box-shadow: 0.06rem 0.1rem 0.16rem 0 rgba(142, 142, 142, 0.04);
      .mineItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.43rem 0 0.2rem;
        height: 0.97rem;
        // border-bottom: 1px solid rgba(143, 143, 143, 0.28);
        box-sizing: border-box;
        &:nth-of-type(2n) {
          background: #f8f8f8;
        }
        &:last-child {
          box-shadow: 0 0.05rem 0.1rem rgba(143, 143, 143, 0.05);
        }
        span {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 0.3rem;
          color: #40404c;
          b {
            margin: 0 0.1rem;
            color: #e4b577;
            font-size: 0.45rem;
            width: 0.45rem;
            text-align: center;
          }
        }
        &:nth-of-type(2) {
          b {
            font-size: 0.3rem;
          }
        }
        &:nth-of-type(3) {
          b {
            font-size: 0.4rem;
          }
        }
        &:nth-of-type(4) {
          b {
            font-size: 0.4rem;
          }
        }
        &:nth-of-type(5) {
          b {
            font-size: 0.4rem;
          }
        }
        &:nth-of-type(6) {
          b {
            font-size: 0.4rem;
          }
        }
        &:nth-of-type(7) {
          b {
            font-size: 0.42rem;
          }
        }
        &:nth-of-type(8) {
          b {
            font-size: 0.4rem;
          }
        }
      }
    }
  }
}
</style>